<template>
	<!-- 为你推荐 -->
	<view class="hot-goods u-m-b-10 u-p-x-16">
		<view class="big-card-wrap u-p-10">
			<view class="type-box u-flex u-row-between u-col-center">
			 	<text class="type-title">推荐店铺</text>
			 	<view class="more u-flex u-col-center" @click="$Router.push({ path: '/pages/goods/shoplist' })">
			 		<text>更多</text>
			 		<view class="u-iconfont uicon-arrow-right" style="color: #999;font-size: 28rpx;"></view>
			 	</view>
			 </view>
			 <view class="class_head">
				 <!-- <view class="cu-modal" style="z-index: -1;" :class="{ show: showSel }" @tap="hideModal"></view> -->
				 <view class="sel-box u-flex-col" v-show="showSel">
				 	<view class="sel-view">
				 		<view class="sel-item" v-for="(item, index) in head2">
				 			<text class="sel-tit">{{item.name}}</text>
				 			<view class="sel-list">
				 				<view class="sel-items" :class="typeItem.isSelect?'active_twoitem':''" v-for="(typeItem) in item.vlues" @tap="headtwoClick(typeItem.label)">
				 					{{typeItem.label}}
				 				</view>
				 			</view>
				 		</view>
				 	</view>
					
					<view class="sel-btn">
						<view class="sel-btnleft" @click="showSel = false">
							取消
						</view>
						<view class="sel-btnrig" @click="selbtn">
							确定
						</view>
					</view>
				 	<!-- <view class="sel-item">扩展自定义排序</view> -->
				 </view>
	<!-- 		 	<scroll-view class="task-type-group" scroll-x="true"
			 		:scroll-left="scrollLeft" 
			 		:scroll-with-animation="true">
			 	  <view class="item tabTopItem" :class="typeItem.order == headid ?'active_item':''" v-for="(typeItem, index) in head1" @click="headoneClick(typeItem)">
			 		<text class="itemtext">{{typeItem.name}}</text>
			 	  </view>
			 	</scroll-view> -->
				<!-- <image src="../../../static/images/fenlei.png" mode="" class="class_icon" @click="getshowSel"></image> -->
			 </view>
			 
			<block v-for="item in goodsList">
					<view class="big-goods" @click="$Router.push({ path: '/pages/goods/list?store_id', query: { store_id: item.id } })">
					<image class="goods-img" lazy-load fade-show :src="item.image_first" mode="aspectFill"></image>
					<view class="goodsright">
						<view class="goodstit">
							<text class="tuijian" v-if="item.is_recommend == 1">推荐</text>
							<text class="goodstits">{{item.name}}</text>
						</view>
						<view class="goodsadress">
							<text class="adress">{{item.address}}</text>
							<view class="adress_view">
								<!-- <image src="../../../static/images/dizhi.png" mode="" class="adress_icon"></image> -->
								<text class="adress_text">{{item.city_name}}{{item.distance_text}}</text>
							</view>
						</view>
						<view class="sale">
							<text class="sale_fen">{{item.score}}分</text>
							<text class="adress_text">月售{{item.sales}}</text>
						</view>
					<!-- 	<view class="renqi">
							<image :src="item.ranking.rank_img" mode="" class="ren_icon"></image>
						    <text>{{item.ranking.text}}</text>
							<view class="u-iconfont uicon-arrow-right" style="color: rgba(178,154,100,1);font-size: 15rpx;"></view>
						</view> -->
					<!-- 	<view class="edu_view" >
							<text class="edu" v-for="(titem,ind) in item.label">{{titem}}</text>
						</view> -->
						
					</view>
				</view>
			</block>
		</view>
		<button v-show="total" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center" @tap.stop="loadMore">
			<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999" :class="{ 'refresh-active': isRefresh }"></text>
			{{ listParams.page >= lastPage ? '没有更多了' : '加载更多' }}
		</button>
	</view>
</template>

<script>
/**
 * 自定义之为你推荐
 * @property {Object} detail - 推荐商品信息
 */
// import shGoodsCard from './sh-goods-card.vue';
export default {
	components: {
		// shGoodsCard
	},
	data() {
		return {
			listParams: {
				page: 1,
				order:'',//排序条件
				screen:'',//筛选数组
				city:'',//所在城市
				choice_city:'',//选择的城市
			}, //当前分页
			lastPage: 1, //总分页
			total: 0, //总商品数
			perPage: 0, //单页商品数
			goodsList: [],
			isRefresh: false,

			// 瀑布流 350-330
			addTime: 100, //排序间隙时间
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			tempList: [],

			// goodsType: this.detail.style ,// 商品模板
			scrollLeft:0,
			showSel:false,
			head1:[],//滚动列表
			headid:'',//默认选中
			head2:[],//筛选列表
		};
	},

	props: {
		// detail: {
		// 	type: Object,
		// 	default: () => {}
		// },
		city: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		city(newVal, oldVal) { //监测到text值发生改变时重新绘制
			// console.log('最新值是：' + newVal, "原来的值是：" + oldVal);
			this.city = newVal
			if(newVal.type == 1){
				//自己所在城市
				this.listParams.city = this.city
			}else{
				//选择的城市
				this.listParams.choice_city = this.city
			}
			this.getGoodsList()
			// console.log(JSON.stringify(this.city))
		}
	},
	created() {
		this.getClass();//获取筛选列表
		this.getGoodsList()
		// this.getGoodsList()
		// if (this.detail.id) {
		// 	this.listParams.category_id = this.detail.id;
		// 	this.getGoodsList();
		// }
		// if (this.detail.ids) {
		// 	this.listParams.goods_ids = this.detail.ids;
		// 	this.getGoodsList();
		// }
	},
	methods: {
		getClass(){
			// console.log(this.city)
			// 筛选列表
			this.$http('home.store', {}).then(res => {
				if (res.code === 1) {
					this.head1 = res.data.order
					this.headid = res.data.order[0].order
					this.listParams.order = res.data.order[0].order
					this.head2 = res.data.screen
				}
			});
		},

		// 商品列表
		getGoodsList() {
			let that = this;
			that.$http('home.storeList', this.listParams).then(res => {
				if (res.code === 1) {
					this.lastPage = res.data.lastpage;
					this.total = res.data.total;
					// this.perPage = res.data.per_page;
					this.isRefresh = false;
					that.goodsList = [...that.goodsList, ...res.data.rows];
					that.tempList = res.data.data;
					// that.goodsList.length && that.splitData();
				}
			});
		},

		loadMore() {
			if (!this.isRefresh) {
				// 加载更多
				if (this.listParams.page < this.lastPage) {
					this.isRefresh = true;
					this.listParams.page += 1;
					this.getGoodsList();
				} 
				// else {
				// 	// 重置为1页数据
				// 	this.listParams.page = 1;
				// 	this.lastPage = 1;
				// 	this.goodsList = [];
				// 	// this.clear();
				// 	this.getGoodsList();
				// }
			}
		},
		getshowSel(){
			if(this.showSel){
				this.showSel = false
			}else{
				this.showSel = true
			}
			
		},
		headoneClick(item){
			this.listParams.order = item.order
			this.headid = item.order
			this.listParams.page = 1;
			this.lastPage = 1;
			this.goodsList = [];
			this.getGoodsList();
		},
		headtwoClick(item){//点击筛选列表
			let headlist = this.head2
			// console.log(item.value)
			for(let i in headlist){
				for(let j in headlist[i].vlues){
					if(item == headlist[i].vlues[j].label){
						if(headlist[i].vlues[j].isSelect){
							headlist[i].vlues[j].isSelect = false
						}else{
							headlist[i].vlues[j].isSelect = true
						}
						
					}
				}
			}
			this.head2=headlist
			this.$forceUpdate();
		},
		selbtn(){//筛选确定按钮
		  let parms =[]
		  let headlist = this.head2
		  for(let i in headlist){
		  	for(let j in headlist[i].vlues){
				let parm ={}
		  		if(headlist[i].vlues[j].isSelect){
					parm.condition = headlist[i].condition
					parm.value = headlist[i].vlues[j].value
					parms.push(parm)
				}
		  	}
		  }
		  this.listParams.screen = parms
		  this.listParams.page = 1;
		  this.lastPage = 1;
		  this.goodsList = [];
		  this.getGoodsList();
		  this.showSel = false
		}
	}
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.big-goods {
	margin-bottom: 10px;
	// width: 710rpx;
	display: flex;
	flex-direction: row;
	padding: 10px;
	// min-height: 260rpx;
	background: #ffffff;
	border-radius: 20rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	align-items: center;
}		
.goods-img {
	width: 240rpx;
	height: 240rpx;
	background-color: #f5f5f5;
	border-radius: 6rpx;
}

.card-right {
	width: 430rpx;
	height: 220rpx;
}

.goods-title {
	font-size: 26rpx;
	font-weight: 600;
	width: 400rpx;
	color: #000000;
	padding-top: 6rpx;

	.title-tag {
		transform: scale(0.9);
		position: relative;
		top: -6rpx;
	}
}

.subtitle-text {
	font-size: 22rpx;
	width: 400rpx;
	font-weight: 500;
	color: #666666;
}
.goodsright{
	width: 65%;
	// height: 100%;
	padding: 10px 0px 10px 10px;
}
.goodstit{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.adress{
	width:100px;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color:rgba(153,153,153,1);
	font-size: 10px;
}
.goodsadress{
	display: flex;
	align-items: center;
	margin: 5px 0;
}
.adress_text{
	color:rgba(153,153,153,1);
	font-size: 10px;
}
.adress_icon{
	width: 10px;
	height: 12px;
	margin-right: 3px;
	position: relative;
	top: -1px;
}
.adress_view{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: auto;
}
.goodstits{
	font-weight: bold;
	color: #333;
	font-size: 15px;
	// display: inline-block;
}
.tuijian{
	width: 36px;
	/* height: 20px; */
	background-color: #e62e1d;
	color: #fff;
	font-size: 10px;
	display: inline-block;
	text-align: center;
	line-height: 16px;
	border-radius: 2px;
	position: relative;
	top: -2px;
	margin-right: 2px;
}
.sale_fen{
	color: rgba(231,75,55,1);
	font-size: 15px;
	display: inline-block;
	margin-right: 3px;
}
.renqi{
	background-color: rgba(250,243,225,1);
	padding: 1px 5px;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	margin: 5px 0;
}
.ren_icon{
	width: 10px;
	height: 10px;
	
}
.renqi text{
	color: rgba(178,154,100,1);
	font-size: 10px;
	font-weight: 500;
	margin-left: 3px;
	display: inline-block;
}
.edu{
	background-color: #e62e1d;
	color: #fff;
	font-size: 10px;
	display: flex;
	padding: 1px 5px;
	border-radius: 3px;
	margin-right: 5px;
}
.edu_view{
	display: flex;
}
.type-title{
	font-weight: bold;
	font-size: 20px;
}
.more{
	font-size: 13px;
	color: #666;
}
.type-box{
	margin-bottom: 10px;
}
.task-type-group{
	width: 90%;
	display: flex;
	flex-direction: row;
	white-space: nowrap;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 0 15px 0px;
	box-sizing: border-box;
	
	.item{
		width: 70px;
		background-color: #fff;
		margin-right: 10px;
		position: relative;
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666;
		line-height: 20px;
		display: inline-block;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 13px 20px;
		border-radius: 3px;
		text-align: center;
		padding: 3px 5px;
	}
}
.class_head{
	display: flex;
	position: relative;
}
.class_icon{
	width: 18px;
	height: 12px;
	margin-left: 10px;
	position: relative;
	margin-top: 8px;
}
.active_item{
	color: rgba(229,65,50,1) !important;
	
}
.active_twoitem{
	border: 1px solid rgba(229,65,50,1) !important;
	color: rgba(229,65,50,1) !important;
}
.sel-box {
	position: absolute;
	width: 750rpx;
	// height: 140rpx;
	max-height: 500px;
	top: 38px;
	max-height: 500px;
	min-height: 300px;
	overflow-y: scroll;
	background: #fff;;
	border-radius: 0px 0px 20rpx 20rpx;
	z-index: 999;
	left: 50%;
	transform: translateX(-50%);
	bottom: -138rpx;
	transition: all ease-out 0.2s;
	.sel-item {
		color: #333;
		padding: 20rpx 40rpx 0;
		font-size: 24rpx;
		font-weight: 500;
		
	}
	.sel-active {
		color: #d5a65a;
		font-size: 26rpx;
		font-weight: 600;
	}
}
.sel-tit{
	color: #333;
	font-size: 15px;
}
.sel-list{
	margin: 10px 0;
	.sel-items{
		width: 70px;
		padding: 3px 5px;
		border-radius: 5px;
		border: 1px solid rgba(249,247,247,1);
		background-color: rgba(249,247,247,1);
		display: inline-block;
		text-align: center;
		margin: 0 13px 8px 0;
		
	}
}
.sel-view{
	height: 85%;
	overflow-y: scroll;
}
.sel-btn{
	height: 15%;
	display: flex;
	flex-direction: row;
}
.sel-btnleft{
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	color: #333;
}
.sel-btnrig{
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(22,165,251,1);
	color: #fff;
	
}
</style>
